<template>
  <div >
    <ul class="header-nav">
        <!-- 一级分类 -->
        <li><a href="#">首页</a></li>
        <li class="cates" v-for="item in cateList" :key="item.id" @mouseover="showCate(item)"
        @mouseleave="hideCate(item)"
        >
            <router-link :to="`/category/${item.id}`" @click="hideCate(item)" >{{item.name}}</router-link>
            <!-- 二级分类 -->
            <div class="layer" :class="{open:item.open}">
                <ul>
                    <li v-for="item1 in item.children" :key="item1.id">
                        <router-link :to="`/category/sub/${item1.id}`" @click="hideCate(item)">
                            <img class="cate-img" :src="item1.picture" alt="">
                            <p>{{item1.name}}</p>
                        </router-link>
                    </li>
                </ul>
            </div>
        </li>

    </ul>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
  setup () {
    const store = useStore()
    // 将获取的数据存放到cateList中
    const cateList = computed(() => store.state.category.list)

    // 点击一级分类获取数据
    // 控制二级分类的显示与隐藏
    const showCate = (item) => {
      store.commit('category/show', item)
    }
    const hideCate = (item) => {
      store.commit('category/hide', item)
    }
    return { cateList, showCate, hideCate }
  }
}
</script>

<style lang="less" scoped>
.header-nav{
    display: flex;
    justify-content: space-around;
    width: 820px;
    padding-left: 40px;
    position: relative;
    z-index: 998;

   > li{
        margin-right: 40px;
        width: 30px;
        text-align: center;
       > a{
            font-size: 15px;
            line-height: 32px;
            height: 32px;
            padding-bottom: 4px;
            color:#333;
        }
        &:hover{
            > a{
                color:@themeColor;
                border-bottom: 1px solid @themeColor;
            }
        }
    }

}
// .cates:hover .layer{
//     display: block;
//     // opacity: 1;
// }
.layer{
    &.open{
        height: 132px;
        display: block;
    }
    display: none;
    // opacity: 0;
    width: 1240px;
    height: 132px;
    background-color: #fff;
    position: absolute;
    left: -180px;
    top: 60px;
    overflow: hidden;
    box-shadow: 0 0 5px #ccc;
    transition: all .5s .2s;
    z-index: 9999;
    ul{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: 132px;
        padding: 0 70px;
        li{
            width: 132px;
            text-align: center;
            .cate-img{
                width: 60px;
                height: 60px;
            }
            p{
                margin-top: 10px;
            }
            &:hover{
                p{
                    color:@themeColor;
                }
            }
        }
    }
}
</style>
